<template>
<div>
  <div id="gz_app"  class="app-container">
    <img id="gz" src="../assets/img/cen.jpg"  v-drag >
    <!-- <el-form>
      <el-form-item>
        <el-input>工会管理办公室</el-input>
      </el-form-item>
    </el-form> -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <h5>1.报告申明</h5>
    <div> 本服务平台对app应用进行独立、客观、公正分析并出具分析报告，不受任何个人或者组织的非法干预。本次分析结果只针对本次上传的app应用有效，本服务平台拥有对本次分析报告的最终解释权。</div>
  </div>
    <button type="button" class="btn btn-primary" v-on:click="getPdf()">导出PDF</button>
</div>
</template>

<script>
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle
      html2Canvas(document.querySelector('#gz_app'), {
        allowTaint: true
      }).then(function (canvas) {
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        const pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        const imgWidth = 595.28
        const imgHeight = 592.28 / contentWidth * contentHeight
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
        const PDF = new JsPDF('', 'pt', 'a4')
        console.log(contentWidth)
        console.log(contentHeight)
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf')
      }
      )
    }
  },
  name: 'gz',
  data () {
    return {
      htmlTitle: '页面导出PDF文件名',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  directives: {
    drag: {
      // 指令的定义
      bind: function (el) {
        const odiv = el // 获取当前元素
        odiv.onmousedown = () => {
          // 算出鼠标相对元素的位置
          // let disX = e.clientX; //- odiv.offsetLeft;
          // let disY = e.clientY; //- odiv.offsetTop;

          document.onmousemove = (e) => {
            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            const left = e.clientX - 300 /* - disX */
            const top = e.clientY - 300 /* - disY */

            // 绑定元素位置到positionX和positionY上面
            // this.positionX = top;
            // this.positionY = left;

            // 移动当前元素
            odiv.style.left = left + 'px'
            odiv.style.top = top + 'px'
          }
          document.onmouseup = () => {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
//  #app{
//     /*width: 1200px;*/
//     /*height: 800px;*/
//     /*position: relative;*/
//     /*border: 1px red solid;*/
//   }
  #gz{
    position: relative;     /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    cursor: pointer;

  }
</style>
